<template>
  <div class="system-role-container layout-padding">
    <div class="system-role-padding layout-padding-auto layout-padding-view">
      <div class="system-user-search mb15">
        <el-form :model="state.form" size="default" label-width="100px" class="mt12 mb12">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="订单号">
                <el-input v-model="state.tableData.param.order_sn" placeholder="请输入订单号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5" class="mb20">
              <el-form-item label="下单时间">
                <el-date-picker
                    v-model="state.tableData.param.created_at"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="YYYY/MM/DD"
                    value-format="YYYY/MM/DD"
                    size="default"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5" class="mb20">
              <el-form-item label="订单状态">
                <el-select
                    v-model="state.tableData.param.status"
                    placeholder="全部"
                    style="width: 240px"
                    clearable
                >
                  <el-option
                      v-for="item in state.option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="5" class="mb20">
              <el-form-item>
                <el-button size="default" type="primary" class="ml10" @click="searchQuery">
                  <el-icon>
                    <ele-Search/>
                  </el-icon>
                  查询
                </el-button>
                <el-button size="default" type="info" class="ml10" @click="resetQuery">
                  <el-icon>
                    <ele-RefreshRight/>
                  </el-icon>
                  重置
                </el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </div>
      <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
        <el-table-column type="index" label="序号" width="60"/>
        <el-table-column prop="order_sn" label="订单号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cycle_info.title" label="周期" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="primary" round>{{ scope.row.cycle_info.title }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price_total" label="订单金额" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pay_total" label="实际支付" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="订单状态" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.status==0">{{ scope.row.status_tip }}</el-tag>
            <el-tag type="success" v-else-if="scope.row.status==1">{{ scope.row.status_tip }}</el-tag>
            <el-tag type="danger" v-else>{{ scope.row.status_tip }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="下单时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="toDetail(scope.row)">详情</el-button>
            <el-button v-if="scope.row.status==0" size="small" text type="danger" @click="onCancel(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          class="mt15"
          :pager-count="5"
          :page-sizes="[10, 20, 30]"
          v-model:current-page="state.tableData.param.pageNum"
          background
          v-model:page-size="state.tableData.param.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.tableData.total"
      >
      </el-pagination>
    </div>
    <RoleDialog ref="roleDialogRef" @refresh="getTableData()"/>
  </div>
</template>

<script setup lang="ts" name="orderLists">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus';
import {orderApi} from "/@/api/order";
import router from "/@/router";

// 引入组件
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));

// 定义变量内容
const roleDialogRef = ref();
const state = reactive<SysRoleState>({
  option:[
    {value:-1,label:'已取消'},{value:0,label:'待支付'},{value:1,label:'已完成'},
  ],
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
      order_sn: '',
      created_at: '',
      status:''
    },
  },
});
// 初始化表格数据
const getTableData = async () => {
  state.tableData.loading = true;
  state.tableData.data = [];
  const res = await orderApi().lists(state.tableData.param);
  state.tableData.loading = false;
  if (res.code != 0) {
    return;
  }
  state.tableData.data = res.data.list;
  // 数据总数（模拟，真实从接口取）
  state.tableData.total = res.data.count;
};
const searchQuery = () => {
  state.tableData.param.pageNum = 1;
  state.tableData.param.pageSize = 10;
  getTableData();
}
const resetQuery = () => {
  state.tableData.param.order_sn = '';
  state.tableData.param.created_at = '';
  state.tableData.param.pageNum = 1;
  state.tableData.param.pageSize = 10;
  getTableData();
}
// 取消订单
const onCancel = (row: RowRoleType) => {
  ElMessageBox.confirm(`如果您已经付款，取消订单可能会导致支付失败，确定要取消订单吗？`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const res = await orderApi().cancel({order_sn: row.order_sn})
    if (res.code != 0) {
      ElMessage.error(res.msg);
      return;
    }
    getTableData();
    ElMessage.success('取消成功');
  }).catch(() => {
  });
};
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  getTableData();
};
// 页面加载时
onMounted(() => {
  getTableData();
});
const toDetail = (row: RowRoleType) => {
  router.push({
    path: '/order_detail',
    query: {sn: row.order_sn},
  })
}
</script>

<style scoped lang="scss">
.system-role-container {
  .system-role-padding {
    padding: 15px;

    .el-table {
      flex: 1;
    }
  }
}
</style>
